@charset "utf-8";

@function vw($a){
    @return ( $a / 640 ) * 100vw;
}

//
header{
    width: 100%;
    height: vw(300);
    position: absolute;
    top: 0;
    background-image: url(../../img/activity/can-phone/can-phone1.jpg);
    background-repeat: no-repeat;
    background-size:100% 100%;
    .can-head{
        width:100%;
        height: vw(75);
        .can-head1{
             line-height: vw(75);
            margin-left: vw(28);
            img{
               line-height: vw(75);
               width: vw(18);
               height: vw(31); 
            }
        }
        .can-head2{
            vertical-align: middle;
            margin-right: vw(29);
            img{
                width: vw(27);
                height: vw(27);
                margin-top: vw(25);
                vertical-align: middle;
                margin-right: vw(10);
            }
            img:nth-child(2){
                width: vw(37);
                height: vw(27);
            }
            img:last-child{
                width: vw(24);
                height: vw(6);
                margin-top: vw(36);
                margin-right: 0;
            }
        }
    }
    .can-wudao{
        width: 100%;
        height: vw(225);
        .can-wudao1{
            margin-left: vw(28);
            h1{
                margin-top: vw(48);
                font-size: vw(32);
                color: white;
                font-weight: normal;
                img{
                    margin-left: vw(6);
                    width: vw(24);
                    height: vw(24);
                }
            }
            h2{
               font-size: vw(21.34);
                color: white;
                font-weight: normal;
                margin-top: vw(19); 
            }
            h3{
                font-size: vw(18.67);
                color: white;
                font-weight: normal;
                margin-top: vw(16);
                img{
                    width: vw(25);
                    height: vw(16);
                }
            }
            p{
                font-size: vw(18.67);
                color: white;
                margin-top: vw(7);
                img{
                    padding-right: vw(4);
                    width: vw(20);
                    height: vw(23);
                }
            }
        }
        .can-wudao2{
            margin-top: vw(48);
            margin-right: vw(27);
            img{
                width: vw(32);
                height: vw(32);
            }
        }
    }

}
section{
    width: 100%;
    position: absolute;
    top: vw(300);
    bottom: vw(47);
        .can-geng{
        margin-left: vw(28);
        margin-right: vw(35);
        margin-top: vw(28);
        margin-bottom: vw(20);
        b{
            font-weight: normal;
            font-size: vw(20);
            line-height: vw(32);
        }
        .more{
                text-align: center;
                font-size: vw(20);
                color: red;
        }
    }
    .can-geng1{
        margin-left: vw(28);
        margin-right: vw(35);
        margin-top: vw(28);
        margin-bottom: vw(20);
        
        b{
            font-weight: normal;
            font-size: vw(20);
            line-height: vw(32);
        }
        .more{
                text-align: center;
                font-size: vw(20);
                color: red;
        }
    }
     
    .can-xiao{
        width: 100%;
        height: vw(143);
        border-top: 1px solid #cdcdcd;
        span{
            input{
                margin-top: vw(31);
                margin-left: vw(31);
                width: vw(51);
                height: vw(25);
                border: none;
                border: 1px solid #cdcdcd;
                color: #bbbbbb;
                font-size: vw(18.39);
                background:white;
                border-radius: vw(5);
            }
            b{
                font-size: vw(20);
                font-weight: normal;
                margin-bottom: vw(28);
            }
            b:hover{
            color: red;
            text-decoration: underline;
        }
            a{
                font-size: vw(20);
                font-weight: bold;
            }
        }
    }
    .can-quan{
        width: 100%;
        .can-quan-li{
            width: 100%;
            height: vw(60);
        li{
            box-sizing: border-box;
            width: 50%;
            height: vw(57);
            float: left;
            line-height: vw(57);
            font-size: vw(21.34);
            list-style: none;
            text-align: center;
            color: #999999;
        }
        li:hover{
            border-bottom: vw(1) solid;
            color: black;
        }
        .can-quan-bottom{
            border-bottom: vw(1) solid;
            color: black;
        }
    }
        .can-lian{
            width: 100%;
            height: vw(120);
            .can-lian1{
                width: vw(60);
                height: vw(60);
                margin:vw(29) vw(28) 0 vw(26);
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .can-lian2{
                margin-top: vw(46);
                margin-right: vw(25);
                p{
                    font-size: vw(21.34);
                    color: #cacaca;
                }
            }
            .can-lian3{
                p{
                   padding-top: vw(37);
                   font-size:vw(24);
                }
                input{
                    width: vw(50);
                    height: vw(35);
                    background: white;
                    border-radius: vw(4);
                    font-size: vw(16);
                    border: 1px solid #cacaca;
                   
                }
            }
        }
        p{
            margin-left: vw(28);
            font-size: vw(21.34);
            color: #585858;
        }
        .can-quan-img{
            width: vw(212);
            height: vw(212);
            margin-left: vw(28);
            margin-top: vw(25);
            img{
                width: 100%;
                height: 100%;
            }
        }
       .can-quan-xiang{
            width: 100%;
            height: vw(125);
            .can-quan-xiang1{
                margin-top: vw(30);
                margin-left: vw(28);
                b{
                    color:#7d7d7d;
                    font-size: vw(17.34);
                    font-weight: normal;
                }
                img{
                    margin-left: vw(30);
                    width: vw(15);
                    height: vw(20);
                }
            }
            .can-quan-xiang2{
                 margin-top: vw(30);
                 margin-right: vw(25);
                b{
                    color:#7d7d7d;
                    font-size: vw(17.34);
                    font-weight: normal;
                }
                
                img{
                    width: vw(24);
                    height: vw(24);
                    margin-right: vw(30);
                }
                
                img:last-child{
                    width: vw(26);
                    height: vw(24);
                    margin-right: 0;
                }
            }
            .can-quan-xiang3{
                  
                li{
                        width: vw(6);
                        height: vw(6);
                        border-radius: 50%;
                        border:1px solid #7d7d7d;
                        float: left;
                        list-style: none;
                        margin-top: vw(50);
                        margin-left: vw(3);
                    }
                    li:first-child{
                      margin-left: vw(100);
                    }
            }
        } 
        .can-lian{
            width: 100%;
            height: vw(120);
            .can-lian1{
                width: vw(60);
                height: vw(60);
                margin:vw(29) vw(28) 0 vw(26);
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .can-lian2{
                margin-top: vw(46);
                margin-right: vw(25);
                p{
                    font-size: vw(21.34);
                    color: #cacaca;
                }
            }
            .can-lian3{
                p{
                   padding-top: vw(37);
                   font-size:vw(24);
                }
                input{
                    width: vw(50);
                    height: vw(35);
                    background: white;
                    border-radius: vw(4);
                    font-size: vw(16);
                    border: 1px solid #cacaca;
                   
                }
            }
        }
        p{
            margin-left: vw(28);
            font-size: vw(21.34);
            color: #585858;
        }
        .can-quan-img{
            width: vw(212);
            height: vw(212);
            margin-left: vw(28);
            margin-top: vw(25);
            img{
                width: 100%;
                height: 100%;
            }
        }
       .can-quan-xiang{
            width: 100%;
            height: vw(125);
            .can-quan-xiang1{
                margin-top: vw(30);
                margin-left: vw(28);
                b{
                    color: #cbcbcb;
                    font-size: vw(17.34);
                    font-weight: normal;
                }
                img{
                    margin-left: vw(30);
                    width: vw(15);
                    height: vw(20);
                }
            }
            .can-quan-xiang2{
                 margin-top: vw(30);
                 margin-right: vw(25);
                 li{
                        width: vw(6);
                        height: vw(6);
                        border-radius: 50%;
                        border:1px solid #585858;
                        float: left;
                        list-style: none;
                        margin-top: vw(10);
                        margin-left: vw(3);
                    }
                    li:nth-child(3){
                        margin-right: vw(20);
                    }
                   
            }
                b{
                    color: #cbcbcb;
                    font-size: vw(17.34);
                    font-weight: normal;
                }
                img{
                    width: vw(24);
                    height: vw(24);
                    margin-right: vw(30);
                }
                
                img:last-child{
                    width: vw(26);
                    height: vw(24);
                    margin-right: 0;
                }
            }
        
    }
}
#jingxuan{
    display: none;
}

.can-lian1{
    animation: zhuan 4s linear infinite;
}
@keyframes zhuan{
    0%{transform: rotate(0);}
    100%{transform: rotate(360deg);}
}